import { BaseComp } from '../../../common/component/comp';
import { ZRenderComp } from '../../../common/component/zrComp';

import layout from './layout4';
import ScoreBoard from '../../compute/v4/scoreboard';

import { CoreBg } from './coreBg';
import { Desk } from './desk';

/**
 * Panel
 * ├── Background (z-index=0)
 * │   ├── CoreBg (z-index=1)
 * ├── Bottom (z-index=20)
 * ├── Window (z-index 边框:20)
 * ├── Desk (new canvas)
 * │   ├── TitleFrameV4 (new canvas, z-index=18,19)
 * │   ├── TimerPanel (z-index=20,30)
 * │   ├── Gear (z-index=20,30)
 * │   ├── Sign (z-index=20,30)
 * │   ├── Tip (new canvas, z-index=60)
 * │   │   ├── TipRadial (z-index=60)
 * │   │   ├── RecordTag (z-index=60)
 * │   ├── Cables (z-index=10)
 * │   │   ├── Cable (z-index=10)
 * │   ├── NameTag (z-index=20,30)
 * │   │   ├── NameTagChip (z-index=20,30)
 * │   ├── DescFrame (z-index=20)
 */
class Panel extends BaseComp {
	constructor(args) {
		super(null);
		this.context = args.context;
		/** @type {ScoreBoard} */
		this.scoreBoard = args.scoreBoard;
		this.div = this.initDom();
		const zrender = this.zrender = args.zrender;
		this.zr = this.zrender.init(this.div);

		this.windows = layout.windows.map(param => new Window({
			...param, parent : this
		}));
		this.bottom = new Bottom({ parent : this });
		this.bg = new Background({ parent : this });
		this.desk = new Desk({ parent : this, zrender })

		this.startTick = this.startTick.bind(this);
	}

	init() {
		this.lastHandler = requestAnimationFrame(this.startTick);
	}

	startTick() {
		this._tick();
	}

	initDom() {
		const width = layout.global.width, height = layout.global.height;
	
		// 先要创建 Dom
		const main = document.getElementById('main');
		main.style.width = width + 'px';
		main.style.height = height + 'px';
	
		let content = document.createElement('div');
		content.id = "panel";
		content.style.position = 'absolute';
		content.style.overflow = 'hidden';
		content.style.width = width + 'px';
		content.style.height = height + 'px';
		content.style.left = '0px';
		content.style.top = '0px';
		main.appendChild(content);
		return content;
	}

	destroy() {
		super.destroy();
		cancelAnimationFrame(this.lastHandler);
	}

	tick() {
		this.lastHandler = requestAnimationFrame(this.startTick);
		this.scoreBoard.tick();
	}
}

class Background extends ZRenderComp {
	constructor(args) {
		super(args.parent);
		this.useParentZRenderInstance();

		this.coreBg = new CoreBg({
			parent: this,
			zlevel: 1,
			amount: 40,
			...layout.coreBg,
			centerX: layout.coreBg.width / 2,
			centerY: layout.titleFrame.y + layout.titleFrame.height * 2/3 - layout.coreBg.y,
		});
	}

	init() {
		// 背景版
		this.createRect(layout.global.width, layout.global.height)
			.fillLinearGradient(0, 0, 0, 1, [
				{offset:0,    color: layout.colors.strokeBgL2},
				{offset:0.02, color: layout.colors.strokeBgD3},
				{offset:0.7,  color: layout.colors.strokeBgD2},
				{offset:0.92, color: layout.colors.strokeBgD1},
				{offset:0.94, color: layout.colors.strokeBgL2},
			])
			.z(0, 0)
			.build();
	}
}

/**
 * 边框 zlevel=20
 */
class Window extends ZRenderComp {
	width = 0;
	height = 0;
	strokeWidth = 1;

	constructor(args) {
		super(args.parent);
		/** @type {number} */ this.width = args.width;
		/** @type {number} */ this.height = args.height;
		/** @type {number} */ this.strokeWidth = args.strokeWidth;
		this.useParentZRenderInstance(args.x, args.y);
	}

	init() {
		const { width, height, strokeWidth } = this;

		// 外框
		this.spWindow = this.createRect(width, height)
			.fill('transparent')
			.stroke(layout.colors.strokeNormal, strokeWidth)
			.shadow(layout.colors.strokeNormal, 5)
			.z(20, 1)
			.build();

		// 挖空的部分
		this.spDestinationOut = this.createRect(width, height)
			.blend('destination-out')
			.z(0, 999)
			.build();
	}
}

/**
 * zlevel=20
 */
class Bottom extends ZRenderComp {
	constructor(args) {
		super(args.parent);
		this.useParentZRenderInstance(layout.bottom.x, layout.bottom.y);
	}

	init() {
		const compLayout = layout.bottom;

		this.createLine(0, 0, compLayout.width, 0)
			.stroke(layout.colors.strokeNormal, 2)
			.shadow(layout.colors.strokeNormal, 5)
			.z(20, 999)
			.build();
		// 渐变颜色的底
		this.createRect(compLayout.width, compLayout.height)
			.fillLinearGradient(0, 0, 0, 1, [
				{offset:0, color:'#FFF'},
				{offset:0.04, color:layout.colors.strokeBgL3},
				{offset:0.86, color:layout.colors.strokeBgL1}
			])
			.z(20, 998)
			.build();
	}
}

export {
	Panel
};
